<template >
        <div>
                <Header/>
                <AddComent @add-comment="addComment" />
                <CommentList :reactList="reactList"/>    
        </div>
</template>
<script setup lang="ts">
import Header from '../components/comment/Header.vue'
import AddComent from '../components/comment/AddComent.vue'
import CommentList from '../components/comment/CommentList.vue'
import { reactive,provide,onMounted } from 'vue';

interface InterComment {
        name:string
        context:string
}
const comList = [
        {name:'bal', context:'vue is so easy',isMe:false},
        {name:'lisi', context:'vue is so bad',isMe:false},
        {name:'lisi1', context:'vue is so bad1',isMe:false},
        {name:'lisi2', context:'vue is so bad2',isMe:false},
]

const reactList = reactive<InterComment[]>(comList);
// 添加评论
const addComment = (item:InterComment) => {
        // console.log('addComment',item)
        reactList.push(item)

}

// 删除评论
const delComment =(index:number) => {
        console.log('delComment',index)
        reactList.splice(index,1);
        console.log(reactList);
}

provide('delCommentEmit', delComment)

</script>
<style>
        
</style>